<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MCP Server Interaction</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
    }
    .container {
      max-width: 600px;
      margin: auto;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input, button, select {
      width: 100%;
      padding: 10px;
      margin-top: 5px;
    }
    textarea {
      width: 100%;
      height: 100px;
      margin-top: 5px;
    }
    .response {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f9f9f9;
    }
  </style>
</head>
<body>
<div class="container">
  <h1>MCP Server Interaction</h1>
  <div class="form-group">
    <button id="listToolsBtn">List Tools</button>
  </div>
  <div class="form-group">
    <label for="toolName">Tool Name:</label>
    <input type="text" id="toolName" value="system_info" placeholder="Enter tool name">
  </div>
  <div class="form-group">
    <label for="toolParams">Tool arguments:</label>
    <textarea type="text" id="toolParams" value="url=http://example.com"
              placeholder='e.g., url=http://example.com & param1=123'></textarea>
  </div>
  <div class="form-group">
    <button id="callToolBtn">Call Tool</button>
  </div>
  <div class="response" id="responseBox">
    <strong>Response:</strong>
    <pre id="responseText" style="white-space: pre-wrap; word-wrap: break-word;">No response yet.</pre>
  </div>
  <div class="form-group">
    <button id="clearResponseBtn">Clear Response</button>
  </div>
</div>

<script>
  const listToolsBtn = document.getElementById('listToolsBtn');
  const callToolBtn = document.getElementById('callToolBtn');
  const responseText = document.getElementById('responseText');

  // Function to list tools
  listToolsBtn.addEventListener('click', async () => {
    try {
      const response = await fetch('/ai/mcp/listTools');
      const data = await response.text();
      responseText.textContent += `\n${data}`; // Append new content
    } catch (error) {
      responseText.textContent = `Error: ${error.message}`;
    }
  });

  // Function to call a tool
  callToolBtn.addEventListener('click', async () => {
    const toolName = document.getElementById('toolName').value;
    const toolParams = document.getElementById('toolParams').value;
    if (!toolName || !toolParams) {
      responseText.textContent = 'Please provide both tool name and toolParams.';
      return;
    }
    const body = 'toolName='+toolName+"&"+toolParams+"";
    try {
      // const response = await fetch('http://127.0.0.1:8080/ai/mcp/callTool', {
      const response = await fetch('/ai/mcp/callTool', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: body
      });
      const data = await response.text();
      responseText.textContent = data;
    } catch (error) {
      responseText.textContent = `Error: ${error.message}`;
    }
  });

  const clearResponseBtn = document.getElementById('clearResponseBtn');

  // Function to clear the response text
  clearResponseBtn.addEventListener('click', () => {
    responseText.textContent = ''; // Clear the content
  });

</script>
</body>
</html>